<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title=""
      left-text=""
      left-arrow
      fixed
      @click-left="onClickLeft"
    >
      <!-- <template #left>
        <router-link  to="/market" >返回
        </router-link>
      </template> -->
      <template #right>
        <!-- 分享面板 -->
        <van-cell @click="showShare = true" />
        <van-icon name="share-o" size="18" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          cancel-text
          :options="options"
          @select="onSelect"
        />
      </template>
    </van-nav-bar>
    <div class="info">
      <!-- 轮播图 -->
      <van-swipe
        style="margin-top: 46px"
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        :style="{ height }"
      >
        <van-swipe-item
          ><img src="../assets/swipe/shop01.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../assets/swipe/shop02.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../assets/swipe/shop03.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../assets/swipe/shop04.jpg" alt=""
        /></van-swipe-item>
      </van-swipe>
      <!-- 商品内容 -->
      <!-- 通知栏 -->
      <van-notice-bar
        left-icon="volume-o"
        speed="60"
        text="享受0元下单，确认收货再付款。粥日食|每日美食粥，关注日食带您二十四节气每日食美粥"
      />
      <!-- 商品销量 -->
      <div class="infobar1">
        <span
          ><i><van-rate v-model="value" readonly allow-half/></i
        ></span>
        <span>月销:<i>110件</i></span>
        <span>总销量:<i>541</i></span>
      </div>
      <!-- <van-divider /> -->
      <!-- 商品抬头 -->
      <div class="infobar2">
        <span>每日食美粥，美好生活从这周开始</span>
      </div>
      <!-- 商品规格 -->
      <div class="infobar3">
        <span>粥日食|薏米红豆粥五谷杂粮100g*7</span>
      </div>
      <div class="infobar4">
        <span>￥29.8</span>
        <span>山西省长治市发货·包邮</span>
      </div>
      <!-- <van-divider /> -->
      <!-- 售后条约 -->
      <div class="infobar5">
        <van-cell is-link @click="showPopup">·七天无理由退货</van-cell>
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
          <div class="text1">
            <h3>服务详情</h3>
            <span
              >1、本商品支持7天无理由退换货，需保证退回包装完好，商品及其标配配件、赠品、说明书、保修凭证均齐全</span
            >
            <div class="hr"></div>
            <span
              >2、因质量问题造成的退换货，客户无需承担退换货产生的运费，非质量问题产生的退换货，客户需要承担退换货产生的运费(包邮商品需要买家承担退货邮费，非包邮商品需要卖家承担发货和退货邮费)</span
            >
          </div>
        </van-popup>
      </div>
      <!-- 详情规格 -->
      <div class="infobar6">
        <van-tabs v-model="active" animated swipeable title-active-color="red">
          <van-tab title="详情">
            <div>
              <img src="../assets/goodsDetail/1.jpg" alt="" />
            </div>
            <div>
              <img src="../assets/goodsDetail/2.jpg" alt="" />
            </div>
            <div>
              <img src="../assets/goodsDetail/3.jpg" alt="" />
            </div>
            <div>
              <img src="../assets/goodsDetail/4.jpg" alt="" />
            </div>
            <div>
              <img src="../assets/goodsDetail/5.jpg" alt="" />
            </div>
            <div>
              <img src="../assets/goodsDetail/6.jpg" alt="" />
            </div>
            <div>
              <img src="../assets/goodsDetail/7.jpg" alt="" />
            </div>
            <div>
              <img src="../assets/goodsDetail/8.jpg" alt="" />
            </div>
            <div>
              <img src="../assets/goodsDetail/9.jpg" alt="" />
            </div>
            <div>
              <img src="../assets/goodsDetail/10.jpg" alt="" />
            </div>
            <div>
              <img src="../assets/goodsDetail/11.jpg" alt="" />
            </div>
          </van-tab>
          <van-tab title="规格">
            <p>配料表/材质:大米、小米、糯米、黑米、红米，红豆等</p>
            <p>规格/尺寸：100g*7</p>
            <p>储存方法:避免阳光直射，放在阴凉处</p>
            <p>保质期：12个月</p>
            <p>产地：山西省</p>
            <p>生产日期：见包装</p>
            <p>发货地：山西省岷县</p>
            <p>产品品牌及名称：粥日食</p>
            <p>
              食用方式：电饭煲；建议一袋本品（100克）淘洗后加入820ml水，用电饭煲煮粥约90分粥即可
            </p>
            <p>生产许可：SC1011404311330</p>
            <p>配送物流：顺丰</p>
            <p>发货时效：48小时</p>
            <p>配送范围：全国（除新疆、西藏、港澳台、海外）</p>
            <p>售后须知：支持7天无理由退换货（未开封）</p>
            <p>发票须知：联系客服</p>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 提交订单栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon to="/shoppingcard" icon="cart-o" text="购物车" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button @click="address" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      active: 2,
      value: 4.5,
      show: false,
      height: "",
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  mounted() {
    let picWidth = 640; //图片宽
    let picHeight = 640; //图片高
    let screenWidth = window.screen.width; //屏幕宽
    let srceenHeight = Math.floor((picHeight * screenWidth) / picWidth) + "px";
    this.height = srceenHeight;
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onClickLeft() {
      this.$router.push("./market");
    },
    detail() {
      this.$router.push("/detail");
    },
    address() {
      this.$router.push("/addressmanage");
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>
<style scoped>
.infobar6 {
  border-top: 1px solid #e8e8e8;
}
.infobar6 p {
  font-size: 15px;
  margin-left: 10px;
}
.infobar6 img {
  width: 100%;
}
.infobar6 >>> .van-tab__text {
  font-size: 15px;
  font-weight: bold;
}
.hr {
  height: 1px;
  width: 100%;
  background-color: #e8e8e8;
  margin: 15px 0;
}
.infobar5 .text1 span {
  color: #c0c0c0;
}
.infobar5 .text1 h3 {
  margin-bottom: 5px;
}
.infobar5 .text1 {
  margin: 10px 10px;
}
.van-cell >>> .van-cell__value {
  color: #f08080;
}
.info {
  margin-bottom: 50px;
}
.infobar4 span:nth-child(1) {
  color: red;
  font-size: 20px;
}
.infobar4 span:nth-child(2) {
  color: #a9a9a9;
  font-size: 5px;
  padding-top: 5px;
}
.infobar4 {
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  margin: 0 10px;
}
.infobar3 {
  font-weight: bold;
  font-size: 20px;
  margin: 5px 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}
.infobar2 {
  margin: 10px 10px;
  font-size: 10px;
}
.infobar1 span i {
  color: red;
}
.infobar1 {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;
  border-bottom: 1px solid #e8e8e8;
  font-size: 15px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe img {
  width: 100%;
}
</style>
